<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>创意设计风格简历</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
    
    :root {
      --primary-color: #ff3e55;
      --secondary-color: #2c3e50;
      --text-color: #333;
      --light-color: #f9f9f9;
      --dark-color: #1a1a1a;
      --accent-color: #3498db;
      --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Poppins', sans-serif;
      background-color: var(--light-color);
      color: var(--text-color);
      overflow-x: hidden;
    }
    
    .cursor {
      position: fixed;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: var(--primary-color);
      pointer-events: none;
      mix-blend-mode: difference;
      z-index: 9999;
      transform: translate(-50%, -50%);
      transition: transform 0.1s;
    }
    
    .container {
      display: grid;
      grid-template-columns: 350px 1fr;
      max-width: 1200px;
      margin: 50px auto;
      background: white;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
      position: relative;
      overflow: hidden;
    }
    
    @media (max-width: 900px) {
      .container {
        grid-template-columns: 1fr;
        margin: 0;
      }
    }
    
    .sidebar {
      background: var(--secondary-color);
      color: white;
      padding: 40px;
      position: relative;
      z-index: 1;
      overflow: hidden;
    }
    
    .sidebar::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect x="0" y="0" width="100" height="100" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="2"/></svg>');
      z-index: -1;
      opacity: 0.5;
    }
    
    .profile {
      text-align: center;
      margin-bottom: 40px;
    }
    
    .profile-img {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      object-fit: cover;
      border: 5px solid rgba(255, 255, 255, 0.2);
      margin-bottom: 20px;
      transition: var(--transition);
      filter: grayscale(20%);
    }
    
    .profile-img:hover {
      transform: scale(1.05);
      border-color: var(--primary-color);
      filter: grayscale(0%);
    }
    
    .name {
      font-size: 1.8rem;
      font-weight: 600;
      margin-bottom: 5px;
      background: linear-gradient(to right, #fff, var(--primary-color));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    
    .title {
      font-size: 1rem;
      color: rgba(255, 255, 255, 0.8);
      margin-bottom: 20px;
    }
    
    .contact-info {
      margin-bottom: 40px;
    }
    
    .contact-item {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      transition: var(--transition);
    }
    
    .contact-item:hover {
      transform: translateX(5px);
    }
    
    .contact-icon {
      width: 30px;
      height: 30px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 15px;
      font-size: 14px;
      transition: var(--transition);
    }
    
    .contact-item:hover .contact-icon {
      background: var(--primary-color);
    }
    
    .contact-text {
      font-size: 0.9rem;
      color: rgba(255, 255, 255, 0.8);
    }
    
    .sidebar-section {
      margin-bottom: 30px;
    }
    
    .sidebar-title {
      font-size: 1.2rem;
      margin-bottom: 20px;
      position: relative;
      padding-bottom: 10px;
      color: white;
    }
    
    .sidebar-title::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 30px;
      height: 3px;
      background: var(--primary-color);
      transition: var(--transition);
    }
    
    .sidebar-section:hover .sidebar-title::after {
      width: 50px;
    }
    
    .skill-item {
      margin-bottom: 15px;
    }
    
    .skill-name {
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
      font-size: 0.9rem;
      color: rgba(255, 255, 255, 0.9);
    }
    
    .skill-bar {
      height: 6px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 3px;
      overflow: hidden;
      position: relative;
    }
    
    .skill-progress {
      height: 100%;
      background: var(--primary-color);
      border-radius: 3px;
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      transition: width 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    
    .language-item {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
    }
    
    .language-name {
      flex: 1;
      font-size: 0.9rem;
      color: rgba(255, 255, 255, 0.9);
    }
    
    .language-level {
      display: flex;
    }
    
    .language-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.2);
      margin-left: 5px;
    }
    
    .language-dot.active {
      background: var(--primary-color);
    }
    
    .main-content {
      padding: 50px;
      position: relative;
    }
    
    .section {
      margin-bottom: 50px;
      position: relative;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.5s ease, transform 0.5s ease;
    }
    
    .section.visible {
      opacity: 1;
      transform: translateY(0);
    }
    
    .section-title {
      font-size: 1.8rem;
      color: var(--secondary-color);
      margin-bottom: 30px;
      position: relative;
      display: inline-block;
    }
    
    .section-title::after {
      content: '';
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 100%;
      height: 3px;
      background: var(--primary-color);
    }
    
    .timeline {
      position: relative;
      padding-left: 30px;
    }
    
    .timeline::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 2px;
      height: 100%;
      background: rgba(0, 0, 0, 0.1);
    }
    
    .timeline-item {
      position: relative;
      margin-bottom: 40px;
      padding-bottom: 20px;
    }
    
    .timeline-item::before {
      content: '';
      position: absolute;
      top: 0;
      left: -30px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: white;
      border: 2px solid var(--primary-color);
      z-index: 1;
      transition: var(--transition);
    }
    
    .timeline-item:hover::before {
      background: var(--primary-color);
      transform: scale(1.2);
    }
    
    .timeline-title {
      font-size: 1.2rem;
      font-weight: 600;
      color: var(--secondary-color);
      margin-bottom: 5px;
    }
    
    .timeline-subtitle {
      font-size: 1rem;
      color: var(--primary-color);
      margin-bottom: 10px;
      font-weight: 500;
    }
    
    .timeline-date {
      font-size: 0.9rem;
      color: #777;
      margin-bottom: 15px;
    }
    
    .timeline-content {
      font-size: 0.95rem;
      line-height: 1.6;
      color: #555;
    }
    
    .project-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 25px;
    }
    
    .project-card {
      background: white;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
      transition: var(--transition);
      position: relative;
      z-index: 1;
    }
    
    .project-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom right, var(--primary-color), var(--accent-color));
      opacity: 0;
      z-index: -1;
      transition: var(--transition);
    }
    
    .project-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    }
    
    .project-card:hover::before {
      opacity: 0.8;
    }
    
    .project-card:hover .project-title,
    .project-card:hover .project-description {
      color: white;
    }
    
    .project-content {
      padding: 25px;
    }
    
    .project-title {
      font-size: 1.2rem;
      font-weight: 600;
      margin-bottom: 10px;
      color: var(--secondary-color);
      transition: var(--transition);
    }
    
    .project-tech {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 15px;
    }
    
    .tech-tag {
      font-size: 0.8rem;
      padding: 3px 10px;
      background: rgba(0, 0, 0, 0.05);
      border-radius: 15px;
      transition: var(--transition);
    }
    
    .project-card:hover .tech-tag {
      background: rgba(255, 255, 255, 0.2);
      color: white;
    }
    
    .project-description {
      font-size: 0.9rem;
      line-height: 1.6;
      color: #555;
      transition: var(--transition);
    }
    
    .theme-switch {
      position: fixed;
      bottom: 30px;
      right: 30px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: var(--primary-color);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      z-index: 1000;
      transition: var(--transition);
    }
    
    .theme-switch:hover {
      transform: rotate(45deg);
    }
    
    /* 暗色模式 */
    body.dark-mode {
      background-color: var(--dark-color);
      color: white;
    }
    
    body.dark-mode .container {
      background: #222;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    }
    
    body.dark-mode .sidebar {
      background: #111;
    }
    
    body.dark-mode .section-title {
      color: white;
    }
    
    body.dark-mode .timeline::before {
      background: rgba(255, 255, 255, 0.1);
    }
    
    body.dark-mode .timeline-title {
      color: white;
    }
    
    body.dark-mode .timeline-content {
      color: #bbb;
    }
    
    body.dark-mode .timeline-date {
      color: #999;
    }
    
    body.dark-mode .project-card {
      background: #333;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }
    
    body.dark-mode .project-title {
      color: white;
    }
    
    body.dark-mode .project-description {
      color: #bbb;
    }
    
    body.dark-mode .tech-tag {
      background: rgba(255, 255, 255, 0.1);
      color: #ddd;
    }
    
    /* 动画效果 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    .animated {
      animation: fadeIn 0.6s forwards;
    }
    
    /* 打印样式 */
    @media print {
      .theme-switch, .cursor {
        display: none !important;
      }
      
      body, body.dark-mode {
        background-color: white;
        color: black;
      }
      
      .container, body.dark-mode .container {
        box-shadow: none;
        margin: 0;
        background: white;
      }
      
      .sidebar, body.dark-mode .sidebar {
        background: #f0f0f0;
        color: black;
      }
      
      .name {
        background: none;
        -webkit-text-fill-color: black;
        color: black;
      }
      
      .title, .contact-text {
        color: #333;
      }
      
      .skill-name, .language-name {
        color: #333;
      }
      
      .section-title, body.dark-mode .section-title,
      .timeline-title, body.dark-mode .timeline-title {
        color: black;
      }
      
      .timeline-content, body.dark-mode .timeline-content,
      .project-description, body.dark-mode .project-description {
        color: #333;
      }
      
      .project-card, body.dark-mode .project-card {
        box-shadow: none;
        background: white;
        border: 1px solid #eee;
      }
      
      .project-title, body.dark-mode .project-title {
        color: black;
      }
    }
  </style>
</head>
<body>
  <div class="cursor" id="cursor"></div>
  <div class="theme-switch" id="themeSwitch">🌓</div>
  
  <div class="container">
    <div class="sidebar">
      <div class="profile">
        <img class="profile-img" src="https://gr-test.oss-cn-shenzhen.aliyuncs.com/02a0271622fba72d55334191e540f2793cee0eee8227010727b0ad469bd8c063.png" alt="个人照片">
        <h1 class="name">张三</h1>
        <p class="title">全栈开发工程师</p>
      </div>
      
      <div class="contact-info">
        <div class="contact-item">
          <div class="contact-icon">📧</div>
          <div class="contact-text">zhangsan@example.com</div>
        </div>
        <div class="contact-item">
          <div class="contact-icon">📱</div>
          <div class="contact-text">13812345678</div>
        </div>
        <div class="contact-item">
          <div class="contact-icon">📍</div>
          <div class="contact-text">北京市海淀区</div>
        </div>
        <div class="contact-item">
          <div class="contact-icon">🔗</div>
          <div class="contact-text">github.com/zhangsan</div>
        </div>
      </div>
      
      <div class="sidebar-section">
        <h2 class="sidebar-title">技能</h2>
        <div class="skill-item">
          <div class="skill-name">
            <span>JavaScript</span>
            <span>90%</span>
          </div>
          <div class="skill-bar">
            <div class="skill-progress" data-width="90"></div>
          </div>
        </div>
        <div class="skill-item">
          <div class="skill-name">
            <span>Vue.js</span>
            <span>85%</span>
          </div>
          <div class="skill-bar">
            <div class="skill-progress" data-width="85"></div>
          </div>
        </div>
        <div class="skill-item">
          <div class="skill-name">
            <span>React</span>
            <span>80%</span>
          </div>
          <div class="skill-bar">
            <div class="skill-progress" data-width="80"></div>
          </div>
        </div>
        <div class="skill-item">
          <div class="skill-name">
            <span>Java</span>
            <span>85%</span>
          </div>
          <div class="skill-bar">
            <div class="skill-progress" data-width="85"></div>
          </div>
        </div>
        <div class="skill-item">
          <div class="skill-name">
            <span>Spring Boot</span>
            <span>80%</span>
          </div>
          <div class="skill-bar">
            <div class="skill-progress" data-width="80"></div>
          </div>
        </div>
        <div class="skill-item">
          <div class="skill-name">
            <span>MySQL</span>
            <span>75%</span>
          </div>
          <div class="skill-bar">
            <div class="skill-progress" data-width="75"></div>
          </div>
        </div>
      </div>
      
      <div class="sidebar-section">
        <h2 class="sidebar-title">语言能力</h2>
        <div class="language-item">
          <div class="language-name">中文（母语）</div>
          <div class="language-level">
            <div class="language-dot active"></div>
            <div class="language-dot active"></div>
            <div class="language-dot active"></div>
            <div class="language-dot active"></div>
            <div class="language-dot active"></div>
          </div>
        </div>
        <div class="language-item">
          <div class="language-name">英语</div>
          <div class="language-level">
            <div class="language-dot active"></div>
            <div class="language-dot active"></div>
            <div class="language-dot active"></div>
            <div class="language-dot active"></div>
            <div class="language-dot"></div>
          </div>
        </div>
      </div>
      
      <div class="sidebar-section">
        <h2 class="sidebar-title">个人特质</h2>
        <div class="skill-item">
          <div class="skill-name">团队合作</div>
          <div class="skill-bar">
            <div class="skill-progress" data-width="95"></div>
          </div>
        </div>
        <div class="skill-item">
          <div class="skill-name">解决问题</div>
          <div class="skill-bar">
            <div class="skill-progress" data-width="90"></div>
          </div>
        </div>
        <div class="skill-item">
          <div class="skill-name">沟通能力</div>
          <div class="skill-bar">
            <div class="skill-progress" data-width="85"></div>
          </div>
        </div>
        <div class="skill-item">
          <div class="skill-name">创新思维</div>
          <div class="skill-bar">
            <div class="skill-progress" data-width="80"></div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="main-content">
      <section class="section" id="about">
        <h2 class="section-title">关于我</h2>
        <p class="timeline-content">
          我是一名拥有3年工作经验的全栈开发工程师，精通前后端开发技术。我热爱编程，善于解决复杂问题，并且具有良好的团队合作精神。我追求代码的优雅和高效，不断学习新技术以提升自己的专业能力。在工作中，我注重用户体验和系统性能，致力于开发高质量的软件产品。
        </p>
      </section>
      
      <section class="section" id="experience">
        <h2 class="section-title">工作经验</h2>
        <div class="timeline">
          <div class="timeline-item">
            <h3 class="timeline-title">高级全栈工程师</h3>
            <h4 class="timeline-subtitle">阿里巴巴</h4>
            <p class="timeline-date">2021年6月 - 至今</p>
            <p class="timeline-content">
              负责公司核心业务系统的开发与维护，主导了电商平台的重构工作，提升了系统性能30%，优化了用户体验，减少了50%的页面加载时间，参与了微服务架构的设计与实现。
            </p>
          </div>
          
          <div class="timeline-item">
            <h3 class="timeline-title">前端开发工程师</h3>
            <h4 class="timeline-subtitle">腾讯</h4>
            <p class="timeline-date">2018年7月 - 2021年5月</p>
            <p class="timeline-content">
              参与开发了多个内部工具和客户端应用，使用Vue.js和React框架构建高性能的Web应用，实现了组件化开发和自动化测试，负责前端架构的优化和性能调优。
            </p>
          </div>
        </div>
      </section>
      
      <section class="section" id="education">
        <h2 class="section-title">教育背景</h2>
        <div class="timeline">
          <div class="timeline-item">
            <h3 class="timeline-title">计算机科学与技术 硕士</h3>
            <h4 class="timeline-subtitle">北京大学</h4>
            <p class="timeline-date">2018 - 2021</p>
            <p class="timeline-content">
              主修人工智能与数据分析，GPA 3.8/4.0，获得优秀毕业生称号。参与了多个研究项目，发表了2篇学术论文。
            </p>
          </div>
          
          <div class="timeline-item">
            <h3 class="timeline-title">软件工程 学士</h3>
            <h4 class="timeline-subtitle">清华大学</h4>
            <p class="timeline-date">2014 - 2018</p>
            <p class="timeline-content">
              主修软件开发与工程管理，GPA 3.7/4.0，获得三好学生称号。参与了校企合作项目，开发了校园信息管理系统。
            </p>
          </div>
        </div>
      </section>
      
      <section class="section" id="projects">
        <h2 class="section-title">项目经验</h2>
        <div class="project-grid">
          <div class="project-card">
            <div class="project-content">
              <h3 class="project-title">电商平台重构</h3>
              <div class="project-tech">
                <span class="tech-tag">Spring Boot</span>
                <span class="tech-tag">Vue</span>
                <span class="tech-tag">MySQL</span>
                <span class="tech-tag">Redis</span>
              </div>
              <p class="project-description">
                作为技术负责人，带领团队完成了电商平台的全面重构，将单体应用拆分为微服务架构，提高了系统的可扩展性和稳定性，引入了Redis缓存和消息队列，优化了高并发场景下的性能。
              </p>
            </div>
          </div>
          
          <div class="project-card">
            <div class="project-content">
              <h3 class="project-title">数据分析平台</h3>
              <div class="project-tech">
                <span class="tech-tag">Python</span>
                <span class="tech-tag">Django</span>
                <span class="tech-tag">React</span>
                <span class="tech-tag">ECharts</span>
              </div>
              <p class="project-description">
                设计并开发了一个企业级数据分析平台，实现了数据的采集、清洗、分析和可视化展示，集成了机器学习算法，提供智能推荐和预测功能，开发了可定制的报表系统。
              </p>
            </div>
          </div>
          
          <div class="project-card">
            <div class="project-content">
              <h3 class="project-title">移动端应用</h3>
              <div class="project-tech">
                <span class="tech-tag">React Native</span>
                <span class="tech-tag">Node.js</span>
                <span class="tech-tag">MongoDB</span>
              </div>
              <p class="project-description">
                开发了一款跨平台移动应用，实现了用户认证、内容推送、社交互动等功能，优化了应用性能和用户体验，应用在App Store和Google Play上线后获得了4.5星的好评。
              </p>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>

  <script>
    // 自定义鼠标指针
    const cursor = document.getElementById('cursor');
    document.addEventListener('mousemove', (e) => {
      cursor.style.left = e.clientX + 'px';
      cursor.style.top = e.clientY + 'px';
    });
    
    document.addEventListener('mousedown', () => {
      cursor.style.transform = 'translate(-50%, -50%) scale(0.8)';
    });
    
    document.addEventListener('mouseup', () => {
      cursor.style.transform = 'translate(-50%, -50%) scale(1)';
    });
    
    // 主题切换
    const themeSwitch = document.getElementById('themeSwitch');
    themeSwitch.addEventListener('click', () => {
      document.body.classList.toggle('dark-mode');
      themeSwitch.textContent = document.body.classList.contains('dark-mode') ? '🌞' : '🌓';
    });
    
    // 技能进度条动画
    function animateSkillBars() {
      const skillBars = document.querySelectorAll('.skill-progress');
      skillBars.forEach(bar => {
        const width = bar.getAttribute('data-width') + '%';
        setTimeout(() => {
          bar.style.width = width;
        }, 300);
      });
    }
    
    // 滚动动画
    function handleScroll() {
      const sections = document.querySelectorAll('.section');
      sections.forEach(section => {
        const sectionTop = section.getBoundingClientRect().top;
        const windowHeight = window.innerHeight;
        
        if (sectionTop < windowHeight * 0.75) {
          section.classList.add('visible');
        }
      });
    }
    
    // 初始化
    window.addEventListener('load', () => {
      animateSkillBars();
      handleScroll();
      
      // 添加动画类
      document.querySelectorAll('.timeline-item').forEach((item, index) => {
        item.classList.add('animated');
        item.style.animationDelay = (index * 0.2) + 's';
      });
      
      document.querySelectorAll('.project-card').forEach((card, index) => {
        card.classList.add('animated');
        card.style.animationDelay = (index * 0.2) + 's';
      });
    });
    
    window.addEventListener('scroll', handleScroll);
  </script>
</body>
</html>